import React from 'react'
import axios from './../../axios/axios'
import Background from '../../beijingtu.gif'

import './index.less'
//定义背景样式
let sectionStyle = {
    width: "100%",
    height: "97.5vh",
// makesure here is String确保这里是一个字符串，以下是es6写法
    background: `url(${Background}) no-repeat center`,
}

class Home extends React.Component {

    state = {
        isVisible: false,
        isFullScreen: false,
        测定生产量数据: {},
        测定缓存量数据: {},
        气泡机生产量数据: {},
        Ray生产量数据: {},
        外观一次检: {},
        修毛胶全景扫码: {},
        测定主线流程全景扫码: {},
        greenJpg:'../../green.jpg'
    }

    componentDidMount() {
        this.request17181927()
        this.requestXRay()
        this.requestWJ()
        this.requestXMJLC()
        this.requestZXLC()

        setInterval(() => {
            this.request17181927()
            this.requestXRay()
            this.requestWJ()
            this.requestXMJLC()
            this.requestZXLC()
        }, 3000)
    }

    request17181927 = () => {
        axios.ajax({
            url: '/cdlc/page',
            method: 'get',
            data: {
                params: {
                    page: 1,
                    limit: 1
                }
            }
        }).then((res) => {
            console.log(res)
            this.setState({
                测定生产量数据: res.data.rows[0]
            })
        })

        //{url:'/cdlc/page',method:'get',params:data}
        axios.ajax({
            url: '/zxlc/page',
            method: 'get',
            data: {
                params: {
                    page: 1,
                    limit: 1
                }
            }
        }).then((res) => {
            console.log(res)
            this.setState({
                测定缓存量数据: res.data.rows[0]
            })
        })
    }

    requestXRay = () => {
        axios.ajax({
            url: '/qplc/page',
            method: 'get',
            data: {
                params: {
                    page: 1,
                    limit: 1
                }
            }
        }).then((res) => {
            console.log(res)
            this.setState({
                气泡机生产量数据: res.data.rows[0]
            })
        })

        //{url:'/cdlc/page',method:'get',params:data}
        axios.ajax({
            url: '/xRayLC/page',
            method: 'get',
            data: {
                params: {
                    page: 1,
                    limit: 1
                }
            }
        }).then((res) => {
            console.log('---====----')
            console.log(res)
            this.setState({
                Ray生产量数据: res.data.rows[0]
            })
        })
    }

    // 外观一次检  ycjlc
    requestWJ = () => {
        axios.ajax({
            url: '/ycjlc/page',
            method: 'get',
            data: {
                params: {
                    page: 1,
                    limit: 1
                }
            }
        }).then((res) => {
            console.log(res)
            this.setState({
                外观一次检: res.data.rows[0]
            })
        })

    }

    // 修毛胶 全景扫码  xmjlc
    requestXMJLC = () => {
        axios.ajax({
            url: '/xmjlc/page',
            method: 'get',
            data: {
                params: {
                    page: 1,
                    limit: 1
                }
            }
        }).then((res) => {
            console.log('---- 修毛胶 全景扫码 ----')
            console.log(res)
            this.setState({
                修毛胶全景扫码: res.data.rows[0]
            })
        })

    }

    // 测定主线流程 全景扫码  xmjlc
    requestZXLC = () => {
        axios.ajax({
            url: '/zxlc/page',
            method: 'get',
            data: {
                params: {
                    page: 1,
                    limit: 1
                }
            }
        }).then((res) => {
            console.log(res)
            this.setState({
                测定主线流程全景扫码: res.data.rows[0]
            })
        })

    }

    render() {
        return (
            <div className="home-wrap" style={sectionStyle}>
                {/* 输入框 表格显示 */}
                <div>
                    {/* 修毛胶机 */}
                    <div style={{position: 'absolute', left: 255, top: 676, border: '1px solid green', fontSize: 14}}>
                        <table>
                            <tr>
                                <td>6#缓存量</td>
                                <td>{this.state.修毛胶全景扫码.hcnum6}</td>
                            </tr>
                        </table>
                    </div>
                    <div style={{position: 'absolute', left: 255, top: 735, border: '1px solid green', fontSize: 14}}>
                        <table>
                            <tr>
                                <td>5#缓存量</td>
                                <td>{this.state.修毛胶全景扫码.hcnum5}</td>
                            </tr>
                        </table>
                    </div>
                    <div style={{position: 'absolute', left: 255, top: 792, border: '1px solid green', fontSize: 14}}>
                        <table>
                            <tr>
                                <td>4#缓存量</td>
                                <td>{this.state.修毛胶全景扫码.hcnum4}</td>
                            </tr>
                        </table>
                    </div>

                    <div style={{position: 'absolute', left: 413, top: 676, border: '1px solid green', fontSize: 14}}>
                        <table>
                            <tr className='font-red'>
                                <td>6#修毛量</td>
                                <td>{this.state.修毛胶全景扫码.wcnum6}</td>
                            </tr>
                        </table>
                    </div>
                    <div style={{position: 'absolute', left: 413, top: 735, border: '1px solid green', fontSize: 14}}>
                        <table>
                            <tr className='font-red'>
                                <td>5#修毛量</td>
                                <td>{this.state.修毛胶全景扫码.wcnum5}</td>
                            </tr>
                        </table>
                    </div>
                    <div style={{position: 'absolute', left: 413, top: 792, border: '1px solid green', fontSize: 14}}>
                        <table>
                            <tr className='font-red'>
                                <td>4#修毛量</td>
                                <td>{this.state.修毛胶全景扫码.wcnum4}</td>
                            </tr>
                        </table>
                    </div>
                    {/* 修毛胶机 */}

                    <div>
                        {/* UF/DB测定机 */}
                        <div style={{position: 'absolute', left: 870, top: 195}}>
                            <table>
                                <tr>
                                    <td>类别</td>
                                    <td>17#</td>
                                    <td>18#</td>
                                    <td>19#</td>
                                    <td>27#</td>
                                </tr>
                                <tr>
                                    <td>缓存量</td>
                                    <td>{this.state.测定缓存量数据.lxnum17}</td>
                                    <td>{this.state.测定缓存量数据.lxnum18}</td>
                                    <td>{this.state.测定缓存量数据.lxnum191 + this.state.测定缓存量数据.lxnum192}</td>
                                    <td>\</td>
                                </tr>
                                <tr className='font-red'>
                                    <td>生产量</td>
                                    <td>{this.state.测定生产量数据.cdnum17}</td>
                                    <td>{this.state.测定生产量数据.cdnum18}</td>
                                    <td>{this.state.测定生产量数据.cdnum19}</td>
                                    <td>\</td>
                                </tr>
                            </table>
                        </div>
                        {/* UF/DB测定机 */}

                        {/* X-ray/气泡检测 */}
                        <div style={{position: 'absolute', left: 95, top: 178}}>
                            <table>
                                <tr>
                                    <td>类别</td>
                                    <td>气泡机</td>
                                    <td>X-ray</td>
                                </tr>
                                <tr>
                                    <td>缓存量</td>
                                    <td>\</td>
                                    <td>\</td>
                                </tr>
                                <tr className='font-red'>
                                    <td>生产量</td>
                                    <td>{this.state.气泡机生产量数据.wcnum3}</td>
                                    <td>{this.state.Ray生产量数据.wcnum}</td>
                                </tr>
                            </table>
                        </div>
                        {/* X-ray/气泡检测 */}

                        {/* 外观一次检 */}
                        <div style={{position: 'absolute', left: 220, top: 440}}>

                            <table>
                                <tr>
                                    <td>类别</td>
                                    <td>8#</td>
                                    <td>9#</td>
                                    <td>10#</td>
                                </tr>
                                <tr>
                                    <td>缓存量</td>
                                    <td>{this.state.外观一次检.hcnum8}</td>
                                    <td>{this.state.外观一次检.hcnum9}</td>
                                    <td>{this.state.外观一次检.hcnum10}</td>
                                </tr>
                                <tr className='font-red'>
                                    <td>生产量</td>
                                    <td>{this.state.外观一次检.wcnum8}</td>
                                    <td>{this.state.外观一次检.wcnum9}</td>
                                    <td>{this.state.外观一次检.wcnum10}</td>
                                </tr>
                            </table>

                        </div>
                        <div style={{position: 'absolute', left: 404, top: 440}}>
                            <table>
                                <tr>
                                    <td>11#</td>
                                    <td>12#</td>
                                    <td>13#</td>
                                </tr>
                                <tr>
                                    <td>{this.state.外观一次检.hcnum11}</td>
                                    <td>{this.state.外观一次检.hcnum12}</td>
                                    <td>{this.state.外观一次检.hcnum13}</td>
                                </tr>
                                <tr className='font-red'>
                                    <td>{this.state.外观一次检.wcnum11}</td>
                                    <td>{this.state.外观一次检.wcnum12}</td>
                                    <td>{this.state.外观一次检.wcnum13}</td>
                                </tr>
                            </table>
                        </div>
                        {/* 外观一次检 */}

                        {/* 全景扫码左 */}
                        <div style={{position: 'absolute', left: 110, top: 595}}>
                            <table>
                                <tr className='font-red'>
                                    <td>合格率</td>
                                    <td>{this.state.修毛胶全景扫码.hgl / 10 + '%'}</td>
                                </tr>
                                <tr>
                                    <td>扫码数</td>
                                    <td>{this.state.修毛胶全景扫码.smzs}</td>
                                </tr>
                            </table>
                        </div>
                        {/* 全景扫码左 */}

                        {/* 全景扫码右 */}
                        <div style={{position: 'absolute', left: 883, top: 835}}>
                            <table>
                                <tr className='font-red'>
                                    <td>合格率</td>
                                    <td>{this.state.测定主线流程全景扫码.hgl / 10 + '%'}</td>
                                </tr>
                                <tr>
                                    <td>扫码数</td>
                                    <td>{this.state.测定主线流程全景扫码.smzs}</td>
                                </tr>
                            </table>
                        </div>
                        {/* 全景扫码右 */}
                    </div>

                </div>

                {/* 箭头测试 */}
                <div>
                    {/*<div className='toRight'></div>*/}
                    {/*<div style={{backgroundColor:'red',width:15,height:10}}></div>*/}
                    {/*<div className='toRight2'></div>*/}
                    {/*<div><img src={require('../../green.jpg')}/></div>*/}
                    {/*<div><img src={img}/></div>*/}
                    {/*<div><img src={require(`${this.state.greenJpg}`)}/></div>*/}
                    {/*<div><img src={require('``')}/></div>*/}

                </div>
                {/* 箭头测试 */}
            </div>
        )
    }
}

export default Home